<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <meta name="description" content="Clamp primitives to the terrain." />
    <meta name="cesium-sandcastle-labels" content="Tutorials, Showcases" />
    <title>Cesium Demo</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script
      type="text/javascript"
      src="../../../Build/CesiumUnminified/Cesium.js"
      nomodule
    ></script>
    <script type="module" src="../load-cesium-es6.js"></script>
  </head>
  <body
    class="sandcastle-loading"
    data-sandcastle-bucket="bucket-requirejs.html"
  >
    <style>
      @import url(../templates/bucket.css);
    </style>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>
    <div id="toolbar">
      <div id="terrainMenu"></div>
      <div id="zoomButtons"></div>
      <div id="toggleLighting"></div>
      <div id="sampleButtons"></div>
    </div>
    <script id="cesium_sandcastle_script">
      function startup(Cesium) {
        "use strict";
        //Sandcastle_Begin
        const viewer = new Cesium.Viewer("cesiumContainer", {
          terrainProvider: Cesium.createWorldTerrain(),
        });
        viewer.scene.globe.depthTestAgainstTerrain = true;

        Sandcastle.addDefaultToolbarMenu(
          [
            {
              //
              // To clamp points or billboards set the heightReference to CLAMP_TO_GROUND or RELATIVE_TO_GROUND
              //
              text: "Draw Point with Label",
              onselect: function () {
                const e = viewer.entities.add({
                  position: Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
                  point: {
                    color: Cesium.Color.SKYBLUE,
                    pixelSize: 10,
                    outlineColor: Cesium.Color.YELLOW,
                    outlineWidth: 3,
                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                  },
                  label: {
                    text: "Clamped to ground",
                    font: "14pt sans-serif",
                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                    horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                    verticalOrigin: Cesium.VerticalOrigin.BASELINE,
                    fillColor: Cesium.Color.BLACK,
                    showBackground: true,
                    backgroundColor: new Cesium.Color(1, 1, 1, 0.7),
                    backgroundPadding: new Cesium.Cartesian2(8, 4),
                    disableDepthTestDistance: Number.POSITIVE_INFINITY, // draws the label in front of terrain
                  },
                });

                viewer.trackedEntity = e;
              },
            },
            {
              text: "Draw Billboard",
              onselect: function () {
                const e = viewer.entities.add({
                  position: Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
                  billboard: {
                    image: "../images/facility.gif",
                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                  },
                });

                viewer.trackedEntity = e;
              },
            },
            {
              //
              // Corridors, polygons and rectangles will be clamped automatically if they are filled with a constant color and
              // has no height or extruded height.
              // NOTE: Setting height to 0 will disable clamping.
              //
              text: "Draw Corridor",
              onselect: function () {
                const e = viewer.entities.add({
                  corridor: {
                    positions: Cesium.Cartesian3.fromDegreesArray([
                      -122.19,
                      46.1914,
                      -122.21,
                      46.21,
                      -122.23,
                      46.21,
                    ]),
                    width: 2000.0,
                    material: Cesium.Color.GREEN.withAlpha(0.5),
                  },
                });

                viewer.zoomTo(e);
              },
            },
            {
              text: "Draw Polygon",
              onselect: function () {
                const e = viewer.entities.add({
                  polygon: {
                    hierarchy: {
                      positions: [
                        new Cesium.Cartesian3(
                          -2358138.847340281,
                          -3744072.459541374,
                          4581158.5714175375
                        ),
                        new Cesium.Cartesian3(
                          -2357231.4925370603,
                          -3745103.7886602185,
                          4580702.9757762635
                        ),
                        new Cesium.Cartesian3(
                          -2355912.902205431,
                          -3744249.029778454,
                          4582402.154378103
                        ),
                        new Cesium.Cartesian3(
                          -2357208.0209552636,
                          -3743553.4420488174,
                          4581961.863286629
                        ),
                      ],
                    },
                    material: Cesium.Color.BLUE.withAlpha(0.5),
                  },
                });

                viewer.zoomTo(e);
              },
            },
            {
              text: "Draw Textured Polygon",
              onselect: function () {
                if (
                  !Cesium.Entity.supportsMaterialsforEntitiesOnTerrain(
                    viewer.scene
                  )
                ) {
                  window.alert(
                    "Terrain Entity materials are not supported on this platform"
                  );
                  return;
                }

                const e = viewer.entities.add({
                  polygon: {
                    hierarchy: {
                      positions: [
                        new Cesium.Cartesian3(
                          -2358138.847340281,
                          -3744072.459541374,
                          4581158.5714175375
                        ),
                        new Cesium.Cartesian3(
                          -2357231.4925370603,
                          -3745103.7886602185,
                          4580702.9757762635
                        ),
                        new Cesium.Cartesian3(
                          -2355912.902205431,
                          -3744249.029778454,
                          4582402.154378103
                        ),
                        new Cesium.Cartesian3(
                          -2357208.0209552636,
                          -3743553.4420488174,
                          4581961.863286629
                        ),
                      ],
                    },
                    material: "../images/Cesium_Logo_Color.jpg",
                    classificationType: Cesium.ClassificationType.TERRAIN,
                    stRotation: Cesium.Math.toRadians(45),
                  },
                });

                viewer.zoomTo(e);
              },
            },
            {
              text: "Draw Rectangle",
              onselect: function () {
                const e = viewer.entities.add({
                  rectangle: {
                    coordinates: Cesium.Rectangle.fromDegrees(
                      -122.3,
                      46.0,
                      -122.0,
                      46.3
                    ),
                    material: Cesium.Color.RED.withAlpha(0.5),
                  },
                });

                viewer.zoomTo(e);
              },
            },
            {
              text: "Draw Model",
              onselect: function () {
                const e = viewer.entities.add({
                  position: Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
                  model: {
                    uri: "../../SampleData/models/CesiumMan/Cesium_Man.glb",
                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                    minimumPixelSize: 128,
                    maximumScale: 100,
                  },
                });

                viewer.trackedEntity = e;
              },
            },
            {
              text: "Sample line positions and draw with depth test disabled",
              onselect: function () {
                const length = 1000;

                const startLon = Cesium.Math.toRadians(86.953793);
                const endLon = Cesium.Math.toRadians(86.896497);

                const lat = Cesium.Math.toRadians(27.988257);

                const terrainSamplePositions = [];
                for (let i = 0; i < length; ++i) {
                  const lon = Cesium.Math.lerp(
                    endLon,
                    startLon,
                    i / (length - 1)
                  );
                  const position = new Cesium.Cartographic(lon, lat);
                  terrainSamplePositions.push(position);
                }

                Promise.resolve(
                  Cesium.sampleTerrainMostDetailed(
                    viewer.terrainProvider,
                    terrainSamplePositions
                  )
                ).then(function (samples) {
                  let offset = 10.0;
                  for (let i = 0; i < samples.length; ++i) {
                    samples[i].height += offset;
                  }

                  viewer.entities.add({
                    polyline: {
                      positions: Cesium.Ellipsoid.WGS84.cartographicArrayToCartesianArray(
                        samples
                      ),
                      arcType: Cesium.ArcType.NONE,
                      width: 5,
                      material: new Cesium.PolylineOutlineMaterialProperty({
                        color: Cesium.Color.ORANGE,
                        outlineWidth: 2,
                        outlineColor: Cesium.Color.BLACK,
                      }),
                      depthFailMaterial: new Cesium.PolylineOutlineMaterialProperty(
                        {
                          color: Cesium.Color.RED,
                          outlineWidth: 2,
                          outlineColor: Cesium.Color.BLACK,
                        }
                      ),
                    },
                  });

                  const target = new Cesium.Cartesian3(
                    300770.50872389384,
                    5634912.131394585,
                    2978152.2865545116
                  );
                  offset = new Cesium.Cartesian3(
                    6344.974098678562,
                    -793.3419798081741,
                    2499.9508860763162
                  );
                  viewer.camera.lookAt(target, offset);
                  viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
                });
              },
            },
            {
              text: "Draw polyline on terrain",
              onselect: function () {
                if (!Cesium.Entity.supportsPolylinesOnTerrain(viewer.scene)) {
                  window.alert(
                    "Polylines on terrain are not supported on this platform"
                  );
                }

                viewer.entities.add({
                  polyline: {
                    positions: Cesium.Cartesian3.fromDegreesArray([
                      86.953793,
                      27.928257,
                      86.953793,
                      27.988257,
                      86.896497,
                      27.988257,
                    ]),
                    clampToGround: true,
                    width: 5,
                    material: new Cesium.PolylineOutlineMaterialProperty({
                      color: Cesium.Color.ORANGE,
                      outlineWidth: 2,
                      outlineColor: Cesium.Color.BLACK,
                    }),
                  },
                });

                const target = new Cesium.Cartesian3(
                  300770.50872389384,
                  5634912.131394585,
                  2978152.2865545116
                );
                const offset = new Cesium.Cartesian3(
                  6344.974098678562,
                  -793.3419798081741,
                  2499.9508860763162
                );
                viewer.camera.lookAt(target, offset);
                viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
              },
            },
          ],
          "zoomButtons"
        );

        Sandcastle.reset = function () {
          viewer.entities.removeAll();
        };

        //Sandcastle_End
        Sandcastle.finishedLoading();
      }
      if (typeof Cesium !== "undefined") {
        window.startupCalled = true;
        startup(Cesium);
      }
    </script>
  </body>
</html>
